<!DOCTYPE html>
<html>
	<head>
  		<meta charset="utf-8">
		<title>pie</title>
		<link href="../css/public.css" rel="stylesheet">			
	</head>
	<body>
	</body>
	<script type="text/javascript" src="../vendor/d3/d3.min.js"></script>
	<script type="text/javascript" src="../componments/container.js"></script>
      <script type="text/javascript" src="../componments/legend.js"></script>
      <script type="text/javascript" src="../componments/pie.js"></script>	
	<script>
      	//初始化页面
      	function init() {
                  //初始化容器
      		var container = new Container({
      			dom: d3.select('body').append('div').attr('class', 'container'),
      			dataUrl: ['../data/testData1.json', '../data/testData2.json'],
      			padding: {top:80, right:50, left:50, bottom:40},
      			width: document.documentElement.clientWidth,
      			height: document.documentElement.clientHeight,
                        refreshTime: 4000
      		});
                  
      		container.init();

                  //图例
      		var legend = new Legend({
      			legend: container.legend
      		});

                  var pie = new Pie({
                        colors: ['#DCD688','#C3D687','#97D884','#7CD67C','#64DBB3','#73D9DD','#70B7E1','#6B94E6','#657CE2', '#6C6EE7'],
                        animationTime: 2000,
                        graph: container.svg,
                        outerRadius: 260,
                        innerRadius: 140,
                  });

      		container.getData(function(res){

                        //更新图形
		            pie.draw(res.data);
                        //绘制图例
		            legend.draw([{
                              name: 'FName',
                              color: '#13A7FE'
                        }]);
      		});

      	}

      	init();


	</script>
</html>